<template>
  <d2-container>
    <div class="" :style="'height:'+containerHeight+'px'">
    	<el-container class="" >
    	  <el-header class="p-0 border-b">
    			<pdu-header></pdu-header>
    		</el-header>
    	  <el-container>
    	    <el-aside width="180px">
    				<pdu-menu></pdu-menu>
    			</el-aside>
    	    <el-main class="p-0 border-l border-r">
    				<pdu-main></pdu-main>
    			</el-main>
    			<el-aside width="250px">
    				<pdu-property v-if="show" ref="pduProperty" @change="onChangeProperty"></pdu-property>
    				<el-empty v-else description="请选择组件"></el-empty>
    			</el-aside>
    	  </el-container>
    	</el-container>
    </div>
  </d2-container>
</template>

<script>
	import pduHeader from './components/header'
	import pduMenu from './components/menu'
	import pduMain from './components/main'
	import pduProperty from './components/property'
  import * as Util from "@/utils";
	export default {
		data() {
			return {
				show: false
			}
		},
		components: {
			pduHeader,
			pduMenu,
			pduMain,
			pduProperty
		},
		methods: {
			onChangeProperty(property) {
				// topology.setValue(property)
        console.log(22222222222,property)
      //  window.topology.setValue(property)
        window.topology.setValue({
			  	id: property.id,
          metercode: property.metercode,
					x: property.x,
					y: property.y,
					width: property.width,
					height: property.height,
/*					// text: property.text,
          // background: property.fillStyle,
          // color: property.fillStyle,*/
				})
        window.topology.render();
			},
			setProperty(property) {
				if (property == undefined || !property) {
					this.show = false
					return
				}
				this.show = true
				this.$nextTick(() => {
					this.$refs.pduProperty.setProperty(property)
				})
			}
		},
    mounted() {
      window.topology.on('*', (event, data) => {
        setTimeout(() => {
				console.log('topology event',event, data)
				if (event === 'add') {
					this.setProperty(data[0])
				}
				if (event === 'click') {
				  if(data.pen ) {
            if (data.pen.name == 'image' && data.pen.key == 'bg') {
              topology.bottom(data.pen)
              topology.setValue({
                id: data.pen.id,
                zIndex: 1,
              })
            } else {
              topology.top(data.pen)
            }
          }
          this.setProperty(data.pen)
       //   topology.render();
         // topology.centerView();
				}
				if (event === 'update') {
					this.setProperty(data.current[0])
				}
        // if (event === 'valueUpdate') {
        //   this.setProperty(data)
        // }
        if (event === 'active') {

        }

        }, 100)

			})
		},
    computed:{
      containerHeight() {
        return Util.getClientHeight() - 173;
      },
    },
	}
</script>

<style>
	.el-header {
		padding: 0;
	}
	.el-main {
		padding: 0 !important;
    overflow:hidden;
	}
</style>
